<template>
  <div class="app-container">

    <SearchContent :queryParams="queryParams" @query="handleQuery" @reset="resetQuery">

      <el-col :span="6">
        <el-form-item label="模版名称:" prop="templateName">
          <el-input v-model="queryParams.templateName" clearable placeholder="请输入模版名称" maxlength="30"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="客户类型:" prop="customersType">
          <el-select v-model="queryParams.customersType" clearable>
            <el-option v-for="dict in dict.type.customer_type" :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="是否带驾:" prop="leadingTheDriver">
          <el-select v-model="queryParams.leadingTheDriver" clearable>
            <template v-for="dict in dict.type.business_yes_no">
              <el-option :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="新/旧车:" prop="newOrOldCars">
          <el-select v-model="queryParams.newOrOldCars" clearable>
            <template v-for="dict in dict.type.new_or_old_cars">
              <el-option :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="产品方案:" prop="planName">
          <el-input v-model="queryParams.planName" clearable placeholder="请输入产品方案"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="创建人:" prop="createBy">
          <el-input v-model="queryParams.createBy" clearable placeholder="请输入创建人"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="创建时间:" prop="startTime">
          <el-date-picker
              v-model="timeRange"
              type="daterange"
              align="left"
              unlink-panels
              range-separator="至"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="changeTime"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="审核状态:" prop="approvalStatus">
          <el-select v-model="queryParams.approvalStatus" clearable>
            <template v-for="dict in dict.type.approval_status">
              <el-option :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="启用状态:" prop="enablingStatus">
          <el-select v-model="queryParams.enablingStatus" clearable>
            <template v-for="dict in dict.type.sys_enable_status">
              <el-option :label="dict.label" :value="parseInt(dict.value)" :key="dict.value"></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-col>


    </SearchContent>

    <div class="card-wrap paddingAll20" :model="queryParams" label-width="86px">
      <div class="table-title-wrap justify-end">
        <el-button v-hasPermi="['contractTemplate:company:add']" type="primary" size="mini" @click="addContractTemplate">新增模版
        </el-button>
      </div>


      <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize" @setSizeCurrent="getList" border>
        <!-- 操作插槽 -->
        <template slot="tableColAc">
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px" fixed="left">
            <template slot-scope="scope">
              <e-button v-hasPermi="['contractTemplate:company:detail']" size="mini" type="text" @click="handleOperate(1,scope.row)"
              >查看
              </e-button>
                <e-button v-hasPermi="['contractTemplate:company:commitApproval']" size="mini" type="text" @click="handleOperate(2,scope.row)" v-if="scope.row.approvalStatus==0">提交审批</e-button>
                <e-button v-hasPermi="['contractTemplate:company:edit']" size="mini" type="text" @click="handleOperate(3,scope.row)"  v-if="scope.row.approvalStatus==0||(scope.row.approvalStatus==2&&scope.row.enablingStatus==2)">编辑</e-button>

              <e-button v-hasPermi="['contractTemplate:company:void']"
                        v-if="scope.row.approvalStatus==0||scope.row.approvalStatus==3||(scope.row.approvalStatus==2 && scope.row.enablingStatus==2)" size="mini"
                        type="text" @click="handleOperate(4,scope.row)"
              >作废
              </e-button>
              <template v-if="scope.row.approvalStatus==2">
                <e-button v-hasPermi="['contractTemplate:company:enable']" v-if="scope.row.enablingStatus==2" size="mini" type="text" @click="handleOperate(5,scope.row)"
                >启用
                </e-button>
                <e-button v-hasPermi="['contractTemplate:company:disable']" v-else size="mini" type="text" @click="handleOperate(6,scope.row)"
                >禁用
                </e-button>
              </template>

            </template>
          </el-table-column>
        </template>
        <!-- 普通列插槽 -->
        <template slot="tableCol">
          <el-table-column label="审核状态" align="center" prop="approvalStatus" min-width="auto" show-overflow-tooltip>
            <template v-slot="{row}">
              <dict-tag :options="dict.type.approval_status" :value="row.approvalStatus"/>
            </template>
          </el-table-column>
          <el-table-column label="启用状态" align="center" prop="enablingStatus" min-width="auto" show-overflow-tooltip>
            <template v-slot="{row}">
              <span v-if="row.enablingStatus ==0">--</span>
              <span v-else class="enableStatus" :class="{active:row.enablingStatus ==2}">{{ row.enablingStatus == 2 ? '禁用' : '启用' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="模版名称" align="center" prop="templateName" min-width="auto" show-overflow-tooltip>
            <template v-slot="{row}">
              <e-button class="enable-text-select" size="mini" type="text" @click="handleOperate(1,row)"
              >{{ row.templateName }}
              </e-button>
            </template>
          </el-table-column>
          <el-table-column label="产品方案" align="center" prop="planName" min-width="auto" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="客户类型" align="center" prop="customersType" min-width="auto" show-overflow-tooltip>
            <template v-slot="{row}">
              <dict-tag :options="dict.type.customer_type" :value="row.customersType"/>
            </template>
          </el-table-column>
          <el-table-column label="新/旧车" align="center" prop="newOrOldCars" min-width="auto" show-overflow-tooltip>
            <template v-slot="{row}">
              <dict-tag :options="dict.type.new_or_old_cars" :value="row.newOrOldCars"/>
            </template>
          </el-table-column>
          <el-table-column label="是否带驾" align="center" prop="leadingTheDriver" min-width="auto" show-overflow-tooltip>
            <template v-slot="{row}">
              <dict-tag :options="dict.type.business_yes_no" :value="row.leadingTheDriver"/>
            </template>
          </el-table-column>
          <el-table-column label="模版类型" align="center" prop="templateType" min-width="auto" show-overflow-tooltip>
            <template v-slot="{row}">
              {{ row.templateType == 2 ? '续租模版' : '租赁模版' }}
            </template>
          </el-table-column>
          <el-table-column label="创建人" align="center" prop="createBy" min-width="auto" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" min-width="auto" show-overflow-tooltip/>
        </template>
      </table-page>
    </div>

  </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import * as contractTemplateApi from "@/api/contractTemplate/contractTemplate"
import {initiateApproval} from "@/api/contractTemplate/contractTemplate";

export default {
  name: "CompanyTemplate",
  components: {
    SearchContent,
  },
  dicts: ['customer_type', 'business_yes_no', 'new_or_old_cars', 'approval_status', 'sys_enable_status'],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        templateClassification: 1,
        pageNum: 1,
        pageSize: 10,
        templateName: null,
        templateType: null,
        customersType: null,
        leadingTheDriver: null,
        newOrOldCars: null,
        planId: null,
        planName: null,
        createBy: null,
        startTime: null,
        endTime: null,
        approvalStatus: null,
        enablingStatus: null

      },
      timeRange: [],
      total: 0,
      dataList: []

    };
  },
  mounted() {
    this.getList()
  },
  activated() {
    this.getList()
  },
  methods: {
    /** 查询测试单表列表 */
    getList() {
      this.loading = true;
      contractTemplateApi.contractTemplateList(this.queryParams).then(res => {
        this.dataList = res.rows;
        this.total = res.total;
      }).finally(() => {
        this.loading = false
      })

    },
    // 创建时间发生改变
    changeTime(val) {
      this.queryParams.startTime = val[0]
      this.queryParams.endTime = val[1]
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.$nextTick(() => {
        this.$refs?.queryForm?.resetFields();
        this.queryParams.startTime = null
        this.queryParams.endTime = null
        this.timeRange = []
        this.handleQuery();
      })
    },

    /** 新增操作 */
    addContractTemplate() {
      this._toPage({
        name: 'AddContractTemplate',
        query: {
          templateClassification: this.queryParams.templateClassification
        }
      })
    },

    handleOperate(type, row) {
      switch (type) {
        case 1://查看
          this._toPage({
            name: 'ContractTemplateDetail',
            query: {
              id: row.id
            }
          })
          break
        case 2://提交审批
          this.commitApproval(row)
          break
        case 3://编辑
          this._toPage({
            name: 'EditContractTemplate',
            query: {
              id: row.id
            }
          })
          break
        case 4://删除
          this.deleteRow(row)
          break
        case 5://启用
          this.enableTemplate(row)
          break
        case 6://禁用
          this.changeStatus(row, 2)
          break
      }
    },
    //提交审批
    commitApproval(row) {
      this.$confirm(`确定将合同模版[${row.templateName}]发起审批吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        contractTemplateApi.initiateApproval(row.id).then(res => {
          this.handleQuery()
          this.$message.success('发起审批成功')
        })
      })
    },
    //启用前校验
    enableTemplate(row) {
      contractTemplateApi.enableVerify(row.id).then(res => {
        if (res.data) {
          this.changeStatus(row, 1);
        } else {
          this.$confirm(res.msg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            contractTemplateApi.contractTemplateEnable(row.id).then(res => {
              this.handleQuery()
              this.$message.success('操作成功')
            })
          })
        }
      })
    },
    //修改启用状态
    changeStatus(row, status) {
      this.$confirm(`确定${status == 1 ? '启用' : '禁用'}吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (status == 1) {
          contractTemplateApi.contractTemplateEnable(row.id).then(res => {
            this.handleQuery()
            this.$message.success('启用成功')
          })
        } else if (status == 2) {
          contractTemplateApi.contractTemplateDisable(row.id).then(res => {
            this.handleQuery()
            this.$message.success('禁用成功')
          })
        }

      })

    },
    deleteRow(row) {
      this.$confirm('确定作废该合同模版?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        contractTemplateApi.contractTemplateDelete(row.id).then(res => {
          this.handleQuery()
          this.$message.success('作废成功')
        })
      })
    }

  }
};
</script>
